<template>
	<view class="container">
		<First ref="first" v-if="step===1" />
		<button @click="handleNextStep" type="primary" v-if="step===1">下一步</button>
		<Second ref="second" v-if="step===2" :phone="mobilePhone" />
		<button @click="handleReset" type="primary" v-if="step===2">重置密码</button>
	</view>
	<Loading />
</template>

<script setup>
	import {
		ref
	} from "vue";
	import First from "./components/first.vue";
	import Second from "./components/second.vue";
	import Loading from "@/components/Loading.vue";

	const first = ref();
	const second = ref();
	const step = ref(1);
	const mobilePhone = ref();

	function handleNextStep() {
		first.value.handleNextStep().then(() => {
			// console.log(res);
			step.value++;
			mobilePhone.value = first.value.formData.mobilePhone;
		})
	}

	function handleReset() {
		second.value.handleReset().then(() => {
			uni.showToast({
				icon: "success",
				title: "密码重置为123456"
			});
			setTimeout(() => {
				uni.reLaunch({
					url: "/pages/login/login"
				})
			}, 1000);
		})
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 0 20rpx;
	}
</style>
